import React, {Component} from 'react';
import {Actions} from 'react-native-router-flux'
import {
  StyleSheet,
  View,
  Text,
  Image,
  TouchableOpacity,
    ImageBackground,
  TouchableHighlight,
  TouchableWithoutFeedback,
  TouchableNativeFeedback,
  Modal,
  Alert
} from 'react-native';
import Colors from '../../assets/colors'

/**
 *
 * @param props
 * @returns {*} 图片显示组件
 * @constructor
 */
const SignaturePreview = props => {
  return (
    <View style={styles.imgContainer}>
      <TouchableOpacity onPressIn={() =>{props.thisPressIn(props.url)}}
                        onPressOut={() =>{props.thisPressOut(props.url,props.photoType)}}>
      <ImageBackground source={{uri: props.url}} style={{width: 230, height: 130,justifyContent:'center',alignItems:'center'}}>

      </ImageBackground>
      </TouchableOpacity>
    </View>
  )
}

/**
 *
 * @param props
 * @returns {*} 添加图片组件
 * @constructor
 */
const AddSignature = props => {
  return (
    <TouchableOpacity onPress={() => Actions.push('Capture', {photoType: props.type,photoAction:props.photoAction})}>
      <View style={styles.imgContainer}>
        <Image source={require('../../assets/icons/add.png')} style={{width: 90, height: 90}}/>
      </View>
    </TouchableOpacity>
  )
}

export default class App extends Component<{}> {
  render() {

    const {photoType, photoAction,cleanImages,imgUrl,thisOpen,thisPhotoOpen,thisPhotoClose,
      thisPressIn,thisPressOut,thisAlertOpen,deleteImg,deleteType,thisAlertClose} = this.props
    let imgs = [];
    if (photoType === 'signInImgs') {
      imgs = this.props.signInImgs
    } else if (photoType === 'signOutImgs') {
      imgs = this.props.singOutImgs
    } else if (photoType === 'SGImgs') {
      imgs = this.props.SGImgs
    } else if (photoType === 'JSImgs') {
      imgs = this.props.JSImgs
    } else if (photoType === 'JLImgs') {
      imgs = this.props.JLImgs
    } else if (photoType === 'allImgs') {
      imgs = this.props.allImgs
    }
    return (
      <View style={styles.container}>

        {
          imgs.map((val, index) =>
            <SignaturePreview cleanImages={cleanImages}
                              thisPressIn={thisPressIn}
                              thisPressOut={thisPressOut}
                              photoType={photoType} key={index} url={val.url}/>)
        }

        <AddSignature type={photoType} photoAction={photoAction} />
        <View>
          <Modal
            animationType='fade'
            onRequestClose={()=> this.onRequestClose()}
            visible={thisOpen}
          >
            <View style={{ flex: 1,margin:20,borderRadius:6}}>
              <TouchableOpacity onPress={ () =>{thisPhotoClose()}}>
                <ImageBackground source={{uri:imgUrl}} style={{width:'100%',height:'100%',borderRadius:6}} />
                <View style={styles.thisClose}>
                  <Text style={{color:'white'}}>X</Text>
                </View>
              </TouchableOpacity>
            </View>
          </Modal>
        </View>

        {
          thisAlertOpen?
            Alert.alert('提示','确定删除照片？',
              [
                {
                  text:'取消',onPress:() =>{
                  thisAlertClose()
                }
                },
                {
                  text:'确定',onPress:() =>{
                  cleanImages(deleteImg,deleteType)
                }
                }

              ]
            ):null
        }

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: Colors.backgroundLightGray,
    alignItems: 'center',
    padding: 10,
    flexDirection: 'row',
    justifyContent: 'center',
    flexWrap: 'wrap',
  },
  imgContainer: {
    marginTop: 10,
    backgroundColor: '#fff',
    width: 250,
    height: 150,
    marginRight: 20,
    borderRadius: 5,
    alignItems: 'center',
    justifyContent: 'center',
  },
  thisClose: {
    left: 10,
    justifyContent: 'flex-start',
    backgroundColor:'red',
    width:20,
    height:20,
    paddingLeft:6,
    borderRadius:10
  },
});